import React, { useState, useEffect } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import { useNavigate, useLocation } from 'umi'
import Icon from '../Icon'
import './index.scss'
export default function index(props: {
  title: string
}) {
  const navigate = useNavigate()
  const location = useLocation()

  // 返回商品列表
  const back = () => [
    navigate('/home'),
    setShow(false)
  ]
  // 控制tabbar的出现
  const [showTab, setShow] = useState(false)

  return (
    <>
      <NavBar onBack={back} right={(
        <div onClick={() => {
          setShow(!showTab)
        }}>
          <Icon name='icon-view-list' size={33}></Icon>
        </div>

      )}>{props.title}</NavBar>
      {
        showTab &&
        <div className="NavtabbarDiv">
          <TabBar
            activeKey={location.pathname}
            onChange={(key) => {
              setShow(false)
              navigate(key)
            }}>
            <TabBar.Item
              key="/home"
              title={((active) => <span style={{ color: active ? '#fc5a5a' : '#333' }}>首页</span>)}
              icon={((active) => <Icon name="icon-home" size={22} color={active ? 'red' : '#333'} />)}
            />
            <TabBar.Item
              key="/search"
              title={((active) => <span style={{ color: active ? '#fc5a5a' : '#333' }}>搜素</span>)}
              icon={((active) => <Icon name="icon-search" size={22} color={active ? 'red' : '#333'} />)}
            />
            <TabBar.Item
              key="/cart"
              title={((active) => <span style={{ color: active ? '#fc5a5a' : '#333' }}>购物车</span>)}
              icon={((active) => <Icon name="icon-cart" size={22} color={active ? 'red' : '#333'} />)}
            />
            <TabBar.Item
              key="/mine"
              title={((active) => <span style={{ color: active ? '#fc5a5a' : '#333' }}>我的</span>)}
              icon={((active) => <Icon name="icon-user" size={22} color={active ? 'red' : '#333'} />)}
            />
          </TabBar>
        </div>
      }

    </>
  )
}
